<template>
    <div class="userList">
        <h1>用户列表</h1>
        <ul>
            <li v-for="(user,index) in userList" @click="chooseUser(index)" :key="index">
                <img :src="user.photo" alt="图片">
                <h3>{{user.userName}}</h3>

            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "UserList",
        props: ["userList"],
        methods: {
            chooseUser(index) {
                this.$emit("chooseUser", index)
            }
        }
    }
</script>

<style scoped>
    .userList {
        width: 200px;
        height: 600px;
        background-color: rebeccapurple;
    }

    .userList ul li {
        display: flex;
    }

    .userList ul li img {
        width: 40px;
        height: 40px;
    }
</style>
